import React, { useState, useEffect } from 'react';
import "./cardMyT.scss";
import { withRouter } from 'react-router-dom';

import { Form, Input, Button, Radio, message } from 'antd';

import { Tabs } from 'antd';
const { TabPane } = Tabs;

function callback(key) {
    console.log(key);
}

const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 19 },
};
const tailLayout = {
    wrapperCol: { offset: 4, span: 19 },
};

const CardMyT = (props) => {
    //获取初始数据
    let userObj = props.userObj ? props.userObj : {};
    //设置单选框的选中项
    const [value, setValue] = useState(userObj.sex ? userObj.sex : "0");
    //设置表单初始值
    const [initFrom, setInitValue] = useState({});
    //更改单选框事件
    const onChange = e => {
        setValue(e.target.value);
    };
    //中间量，阻止发起无意义的请求
    const [valuess, setVal] = useState({});
    //正确提交事件
    const onFinish = (values) => {
        //判断valuess是否为空
        if (!valuess.nickName) {
            //为中间量赋值
            setVal(values);
            //设置userObj
            props.setUserObj && props.setUserObj({ ...userObj, ...values });
        } else {
            //判断values是否与中间量不一致
            if (JSON.stringify(valuess) !== JSON.stringify(values)) {
                //设置userObj
                props.setUserObj && props.setUserObj({ ...userObj, ...values });
                //为中间量赋值
                setVal(values);
            }
        }
        console.log('Success:', values);
    };
    //错误提交事件
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    //更改表单初始值
    useEffect(() => {
        userObj.userName && setInitValue(userObj);
    }, [userObj]);

    //正确提交密码事件
    const onFinishPwd = (values) => {
        console.log('密码:', values);
        if(values.newPassword === values.enterPwd){
            props.setPwdObj && props.setPwdObj(values);
        }else{
            message.warning("新密码与确认密码不同");
        }
    };
    //错误提交密码事件
    const onFinishFailedPwd = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    return (
        <Tabs defaultActiveKey="1" onChange={callback}>
            {
                initFrom.sex &&
                (<>
                    <TabPane tab="基本资料" key="1">
                        <Form
                            {...layout}
                            name="basic"
                            initialValues={initFrom}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                        >
                            <Form.Item
                                label="用户昵称"
                                name="nickName"
                                rules={[{ required: true, message: '请输入昵称!' }]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item
                                label="手机号码"
                                name="phonenumber"
                                rules={[{ required: true, message: '请输入手机号!' }]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item
                                label="邮箱"
                                name="email"
                                rules={[{ required: true, message: '请输入邮箱!' }]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item label="性别" name="sex" getValueProps={(value) => value}>
                                <Radio.Group onChange={onChange} value={value}>
                                    <Radio value={"0"}>男</Radio>
                                    <Radio value={"1"}>女</Radio>
                                </Radio.Group>
                            </Form.Item>

                            <Form.Item {...tailLayout}>
                                <Button type="primary" htmlType="submit">
                                    保存
                                </Button>
                                <Button type="primary" danger onClick={() => props.history.go(-1)}>
                                    关闭
                                </Button>
                            </Form.Item>
                        </Form>
                    </TabPane>
                    <TabPane tab="修改密码" key="2">
                        <Form
                            {...layout}
                            name="basicPwd"
                            initialValues={props.pwdObj?props.pwdObj:{}}
                            onFinish={onFinishPwd}
                            onFinishFailed={onFinishFailedPwd}
                        >
                            <Form.Item
                                label="旧密码"
                                name="oldPassword"
                                rules={[{ required: true, message: '请输入旧密码!' }]}
                            >
                                <Input.Password />
                            </Form.Item>

                            <Form.Item
                                label="新密码"
                                name="newPassword"
                                rules={[{ required: true, message: '请输入新密码!' }]}
                            >
                                <Input.Password />
                            </Form.Item>

                            <Form.Item
                                label="确认密码"
                                name="enterPwd"
                                rules={[{ required: true, message: '请确认密码!' }]}
                            >
                                <Input.Password />
                            </Form.Item>

                            <Form.Item {...tailLayout}>
                                <Button type="primary" htmlType="submit">
                                    保存
                                </Button>
                                <Button type="primary" danger onClick={() => props.history.go(-1)}>
                                    关闭
                                </Button>
                            </Form.Item>
                        </Form>
                    </TabPane>
                </>)
            }
        </Tabs>
    );
};

export default withRouter(CardMyT);